<template>
	<view class="beijingse">
		<u-swiper :list="list1" height="156" radius="0" circular></u-swiper>
		<view class="mainpadding">
			<view class="mainpadding ffffff radius">
				<view class="xiaohei sanshier">成为采购员，享受超低采购价</view>
				<view class=" dingwei flexbetween margin_top2" :class="showflag==index?'huanbox1':'huanbox'"
					:style="{backgroundImage:`url(${item.bg_image_text})`}" v-for="(item,index) in list" :key="item.id"
					 @click="changetc(index,item)">
					<!-- <view class="huanbox dingwei flexbetween margin_top2" v-for="item in list" :key="item.id" @click="tzgm"> -->
					<view class="flexleft">
						<view class="huangow margin_right2">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 240rpx;">
							<view class="zhoktext">{{item.name}}</view>
							<view class="qinank margin_top2">{{item.des}}</view>
						</view>
					</view>
					<view class="baibtn1 flexcenter" @click="tzgm(item.id)">￥{{Number(item.price)}}</view>
				</view>
			</view>
			<view class="mainpadding ffffff radius margin_top">
				<view class="xiaohei sanshier textcenter">专项服务/权益</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter ershiw margin_top" v-for="item in cardqy" :key="item.id">
						<view class="">
							<view class="icon">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="xiaohei strongtext textcenter margin_top1">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				bannerList: [],
				list: [],
				showflag:0,
				cardqy:[],
			}
		},
		onLoad() {
			this.getbanner()
			this.getlist()
		},
		methods: {
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					is_more: 1,
					advertise_position_id: 3
				}).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			changetc(index,item){
				this.showflag = index
				this.cardqy = item.cardqy
			},
			getlist() {
				httpRequest.request('/api/cardcl/cardIndex', 'GET', {}).then(res => {
					this.list = res.data
					this.cardqy = res.data[0].cardqy
				})
			},
			// 跳转购买填写信息页面
			tzgm(id) {
				uni.navigateTo({
					url: '/pages_mine/tianxiegrxx?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin: auto;

		image {
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			width: 100%;
			height: 100%;
		}
	}

	.baibtn1 {
		width: 170rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #F38136;
	}

	.qinank {
		font-size: 24rpx;
		font-weight: 300;
		color: #D5AE68;
	}

	.zhoktext {
		font-size: 32rpx;
		font-weight: 500;
		color: #B88437;
	}

	.huangow {
		width: 112rpx;
		height: 98rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.huanbox1 {
		padding: 40rpx 30rpx;
		background-size: cover;
		// backdrop-filter: blur(1000px);
		position: relative;
		background-repeat: no-repeat;
		box-sizing: border-box;
	}
	.huanbox {
		padding: 40rpx 30rpx;
		background-size: cover;
		// backdrop-filter: blur(1000px);
		position: relative;
		background-repeat: no-repeat;
		box-sizing: border-box;
		&:before {
			top: 0;
			left: 0;
			content: '';
			display: block;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.05);
			position: absolute;
			z-index: 1;
		}
		.baibtn1 {
			// backdrop-filter: blur(10px);
			position: relative;
			z-index: 2;
		}
	}
</style>